<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="tutorial" width="300" height="300"></canvas>
  <script>
    var canvas = document.getElementById('tutorial');
    //获得 2d 上下文对象
    var ctx = canvas.getContext('2d');
    // 颜色
    ctx.fillStyle = "rgb(200,0,0)"; //填充的默认颜色为黑色
      //绘制矩形  fillRect(x, y, width, height)：绘制一个填充的矩形。
      // strokeRect(x, y, width, height)：绘制一个矩形的边框
      // clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
    ctx.fillRect (10, 10, 55, 50);
    ctx.strokeRect(10, 10, 55, 50)
    ctx.clearRect(15, 15, 25, 25)
    
    // ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    // ctx.fillRect (30, 30, 55, 50);
  </script>
</body>
</html>